<template>
  <view class="pets-items" @click="gotoPage" :class="props.orgin === 'marker' ? 'marker' : ''">
    <img :src="$countImgUrl(props.item.face)" class="img">
    <view class="right-context">
      <view class="name">
        <view style="flex:1;display: flex;align-items: center">
          <view style="max-width:300rpx" class="u-line-1">{{props.item.name || props.item.petName}}</view>
          <img :src="`https://img.qumoyugo.com/webimgbg/picopino_icon_sex_new_${props.item.sex}.png`" alt="" class="img-sex" v-if="props.item.sex">
        </view>
        <view class="distance" >
          {{ getDistance(props.item.distance) }}
        </view>
      </view>
      <view class="align-c">
        {{props.item.breedName}}（{{props.item.age}} {{ props.item.weight }} kg）
      </view>
      <view style="color:#999">
        溜宠时间：{{ props.item.strollingTime || 'TA还没有固定时间哦！'}}
      </view>
    </view>
  </view>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
const { $countImgUrl } = getCurrentInstance().appContext.config.globalProperties
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  orgin: {
    type: String,
    default: ''
  }
})
const getDistance = distance => {
  distance = distance || 0
  return distance < 1 ? (distance * 1000).toFixed(2) + 'm' : distance.toFixed(2) + 'km'
}
const gotoPage = () => {
  uni.navigateTo({
    url: `/user/petHome?userId=${props.item.customerId}&petId=${props.item.id}`
  })
}
</script>
<style scoped lang="scss">
.pets-items{
  display: flex;
  font-size: 24rpx;
  height: 178rpx;
  padding: 20rpx 30rpx 20rpx 20rpx;
  border-radius: 20rpx;
  background: #FFF;
  margin-bottom: 10rpx;
  box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.06);
  &.marker{
    height: 220rpx;
    .img{
      width: 180rpx;
      height: 180rpx;
    }
  }
  .img{
    border-radius: 20rpx;
    width: 138rpx;
    height: 138rpx;
  }
  .right-context{
    padding-left: 20rpx;
    width: 500rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .name{
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    line-height: 42rpx;
    display: flex;
    justify-content: space-between;
  }
  .distance{
    // color: #3289CA;
    font-size: 24rpx;
    font-weight: normal;
  }
  .img-sex{
    width: 26rpx;
    height: 26rpx;
    margin-left: 10rpx;
  }
  .align-c{
    font-weight: bold;
  }
}
</style>
